<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

import edit from '@/assets/icon/common/edit.svg'
import del from '@/assets/icon/common/del.svg'

/**
 * 接收父组件传递的属性
 */
const props = defineProps({
  leftIcon: {
    type: String,
    default: edit
  },
  rightIcon: {
    type: String,
    default: del
  },
  defaultColor: {
    type: String,
    default: 'rgb(21, 204, 190, 0.8)'
  },
  leftColor: {
    type: String,
    default: 'rgb(230, 162, 60, 0.8)'
  },
  rightColor: {
    type: String,
    default: 'rgb(248, 152, 152, 0.8)'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  // 新增：按钮类型
  type: {
    type: String,
    default: 'twoBut', // tag, oneBut, twoBut
    validator: (value) => {
      return ['tag', 'oneBut', 'twoBut'].includes(value)
    }
  },
  // 左侧点击的回调函数
  onLeftClick: {
    type: Function,
    default: () => {}
  },
  // 右侧点击的回调函数
  onRightClick: {
    type: Function,
    default: () => {}
  }
})

/**
 * 状态管理
 */
const buttonRef = ref(null)
const currentState = ref('default') // default, left, right

/**
 * 处理鼠标移动，判断悬停区域
 */
const handleMouseMove = (e) => {
  // tag类型不处理鼠标移动
  if (props.type === 'tag' || props.disabled || !buttonRef.value) return

  const rect = buttonRef.value.getBoundingClientRect()
  const buttonWidth = rect.width
  const mouseX = e.clientX - rect.left // 鼠标在按钮内的X坐标

  // oneBut类型始终是左侧状态
  if (props.type === 'oneBut') {
    currentState.value = 'left'
  }
  // twoBut类型区分左右区域
  else if (props.type === 'twoBut') {
    // 左侧区域 - 左侧状态
    if (mouseX < buttonWidth / 2) {
      currentState.value = 'left'
    }
    // 右侧区域 - 右侧状态
    else {
      currentState.value = 'right'
    }
  }
}

/**
 * 处理鼠标离开按钮
 */
const handleMouseLeave = () => {
  // tag类型不处理鼠标离开
  if (props.type === 'tag') return

  // oneBut类型鼠标离开回到默认状态
  currentState.value = 'default'
}

/**
 * 处理按钮点击
 */
const handleClick = (e) => {
  e.preventDefault()
  // tag类型或禁用状态不处理点击
  if (props.type === 'tag' || props.disabled) return

  if (currentState.value === 'left') {
    props.onLeftClick()
  } else if (currentState.value === 'right' && props.type === 'twoBut') {
    props.onRightClick()
  } else {
    // do nothing
  }
}

/**
 * 注册/移除事件监听
 */
onMounted(() => {
  if (buttonRef.value) {
    buttonRef.value.addEventListener('mousemove', handleMouseMove)
    buttonRef.value.addEventListener('mouseleave', handleMouseLeave)
  }
})

onUnmounted(() => {
  if (buttonRef.value) {
    buttonRef.value.removeEventListener('mousemove', handleMouseMove)
    buttonRef.value.removeEventListener('mouseleave', handleMouseLeave)
  }
})
</script>

<template>
  <div>
    <button
      ref="buttonRef"
      :style="{
        '--default-color': props.defaultColor,
        '--left-color': props.leftColor,
        '--right-color': props.rightColor
      }"
      :class="{
        disabled: props.disabled || props.type === 'tag',
        'state-default': currentState === 'default',
        'state-left': currentState === 'left',
        'state-right': currentState === 'right'
      }"
      @click="handleClick"
      class="area-sensitive-button"
    >
      <!-- 左侧图标 - tag类型隐藏 -->
      <span class="icon left-icon" :style="{ display: props.type === 'tag' ? 'none' : 'flex' }">
        <img :src="props.leftIcon" loading="lazy" :alt="`左侧图标`" />
      </span>

      <!-- 中间文本 -->
      <span class="text">
        <slot>操作</slot>
      </span>

      <!-- 右侧图标 - tag类型或oneBut类型隐藏 -->
      <span
        class="icon right-icon"
        :style="{
          display: props.type === 'tag' ? 'none' : 'flex'
        }"
      >
        <img :src="props.rightIcon" loading="lazy" :alt="`右侧图标`" />
      </span>
    </button>
  </div>
</template>

<style lang="scss" scoped>
/* 保持原有样式不变 */
.area-sensitive-button {
  min-height: 25px;
  margin: 0 5px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 3px;
  outline: none;
  user-select: none;
  cursor: pointer;
  transform: translateY(0px);
  position: relative;
  font-family: 'Istok Web', sans-serif;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);

  background-size: 200% 100%;
  transition:
    background-position 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);

  &.disabled {
    background: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
  }

  font-size: 16px;

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .left-icon {
    transform: translateX(-10px);
  }

  .right-icon {
    transform: translateX(10px);
  }

  .text {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
  }

  &.state-default {
    background: linear-gradient(to right, var(--default-color), var(--default-color));
    background-position: 50% 0%;
    border: 1px solid var(--default-color);
    color: white;
    box-shadow:
      inset 0 30px 30px -15px rgba(255, 255, 255, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.3),
      inset 0 1px 20px rgba(0, 0, 0, 0),
      0 3px 0 rgba(0, 0, 0, 0.2),
      0 3px 2px rgba(0, 0, 0, 0.2),
      0 5px 10px rgba(0, 0, 0, 0.1),
      0 10px 20px rgba(0, 0, 0, 0.1);
  }

  &.state-left {
    background: linear-gradient(to right, var(--left-color) 0%, var(--default-color) 100%);
    background-position: 0% 0%;
    border: 1px solid var(--left-color);
    color: white;
    box-shadow:
      inset 0 30px 30px -15px rgba(255, 255, 255, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.3),
      inset 0 1px 20px rgba(0, 0, 0, 0),
      0 3px 0 rgba(0, 0, 0, 0.2),
      0 3px 2px rgba(0, 0, 0, 0.2),
      0 5px 10px rgba(0, 0, 0, 0.1),
      0 10px 20px rgba(0, 0, 0, 0.1);

    .left-icon {
      opacity: 1;
      transform: translateX(0);
    }

    .text {
      transform: translateX(15px);
    }
  }

  &.state-right {
    background: linear-gradient(to right, var(--default-color) 0%, var(--right-color) 100%);
    background-position: 100% 0%;
    border: 1px solid var(--right-color);
    color: white;
    box-shadow:
      inset 0 30px 30px -15px rgba(255, 255, 255, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.3),
      inset 0 1px 20px rgba(0, 0, 0, 0),
      0 3px 0 rgba(0, 0, 0, 0.2),
      0 3px 2px rgba(0, 0, 0, 0.2),
      0 5px 10px rgba(0, 0, 0, 0.1),
      0 10px 20px rgba(0, 0, 0, 0.1);

    .right-icon {
      opacity: 1;
      transform: translateX(0);
    }

    .text {
      transform: translateX(-15px);
    }
  }
}

.area-sensitive-button:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 16px 2px -15px rgba(0, 0, 0, 0),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 20px rgba(0, 0, 0, 0.1),
    0 0 0 var(--default-color),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0);
}

.area-sensitive-button.state-left:active {
  box-shadow:
    inset 0 16px 2px -15px rgba(0, 0, 0, 0),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 20px rgba(0, 0, 0, 0.1),
    0 0 0 var(--left-color),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0);
}

.area-sensitive-button.state-right:active {
  box-shadow:
    inset 0 16px 2px -15px rgba(0, 0, 0, 0),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 20px rgba(0, 0, 0, 0.1),
    0 0 0 var(--right-color),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0);
}
</style>
